<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	a:hover{text-decoration: none;}
	.ace-icon.fa-clock-o{margin-right: 3px}
  
	.main {
		display: flex;
		justify-content: center;
		padding: 20px 15% 0 0 ;
	}
	.power-time-outer {
		width: 45%;
		display: flex;
		flex-wrap: wrap;
		margin-left: 1.2%;
		border-left: 1px solid #EDEDED;
		border-top: 1px solid #EDEDED;
	}
	.power-time-outer .item {
		width: 33%;
		background: #F8FAFE;
		border-right: 1px solid #EDEDED;
		border-bottom: 1px solid #EDEDED;
	}
	.power-time-outer .item:hover {
		color: #337ab7;
	}
	.power-time-outer .item:active {
		color: #337ab7;
	}
	.power-time-outer .item .top {
		font-weight: bold;
		text-align: center;
		padding: 1rem 0;
		position: relative;
	}
	.power-time-outer .item .top .fa-edit {
		position: absolute;
		right: 5%;
	}
	.power-time-outer .item .bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding-bottom: 15px;
	}
	.power-time-outer .item .bottom span {
		margin-bottom: 8px;
		/* width: 9rem; */
		/* width: 43%; */
		text-align: center;
	}
	.a-blue {
		color: #337ab7;
	}
</style>
<div class="page-header">
    <h1 style="font-size: 20px;">
        <a class="a-back" href="<?= admin_url('brand/power_time') ?>">
            <i class="fa fa-reply"></i>
        </a>
        <?= $brandNameStr ?>
    </h1>
</div>
<div class="col-xs-12">		
	<a href="javascript:;" class="btn btn-info a-custom reset-power-time">
		<i class="ace-icon fa fa-refresh"></i> 重置默认时间
	</a>
</div>
<div class="col-xs-12 main">
	<div class="power-time-outer">
		<?php foreach($schoolPowerTimeArr as $k => $v): ?>
			<a class="item week-<?= $k ?>" href="#modal-power-time" data-toggle="modal" data-key="<?= $k ?>">
				<div class="top">
					<span class="week-name"><?= transform_week_to_chinese_long($k) ?></span>
					<i class="fa fa-edit a-blue"></i>
				</div>
				<div class="bottom">
					<?php if($v): ?>
						<?php foreach($v as $k2 => $v2): ?>
							<span class="label label-success <?php if($k2 % 2 == 0): ?>mr10<?php endif ?>">
								<?= $v2['starttime'] ?> - <?= $v2['endtime'] ?>
							</span>
						<?php endforeach ?>	
					<?php else: ?>
						<span class="a-blue">暂未设置</span>
					<?php endif ?>	
				</div>
			</a>
		<?php endforeach ?>
	</div>
</div>
<!-- 定时开关机弹窗 -->
<div id="modal-power-time" class="modal fade">
	<input type="hidden" name="week" />
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					<!-- 星期几 -->
					<span class="week-name"></span>
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10">
							<input type="hidden" name="id" />
							<div class="form-group mb10">
								<a href="javascript:;" class="col-sm-4 control-label bolder blue create-power-time"><i class="fa fa-plus"></i> 添加定时开关机时间</a>
							</div>
							<div id="power-time-div"></div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-power-time">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	$(function(){
		var brandIdArr = JSON.parse('<?= $brandIdJson ?>');
		// 已自定义过的话，接口传定时开关机时间过来
		var powerTimeJson = '';
		// console.log(brandIdArr);
        // 新增开关机时间
        $("body").on("click", ".create-power-time", function(){
			create_power_time_item("8:00", "18:00");
		});
		// 设置定时开关机时间
		$("body").on("click", ".power-time-outer .item", function(){
			var key = $(this).data("key");
			var weekname = $(this).find(".week-name").text();
			$("#modal-power-time").find(".week-name").text(weekname);
			// 记录星期几
			$("#modal-power-time").find("input[name=week]").val(key);
			var getUrl = "<?=admin_url('brand/get_power_time_v2_for_day')?>";
			var params = {
				week: key
			};
			ajax_get(getUrl, params, function(res) {
				// 清空时间点
				$("#power-time-div").empty();

				for(var i in res.data) {
					var row = res.data[i];
					create_power_time_item(row.starttime, row.endtime);
				}
			});
		});
		// 保存开关机时间
		$("#save-power-time").click(function(){
			// 星期几
			var week = $("#modal-power-time").find("input[name=week]").val();
			var powerTime = new Array();
			$("#power-time-div .form-group").each(function(){
				// 检查内容是否被删除
				if($(this).find(".time-start").length) {
					var timeData = {
						"starttime" : $(this).find(".time-start").text(),
						"endtime": $(this).find(".time-end").text()
					}
					powerTime.push(timeData);
				}
			})
			// 提交到后台
			var data = {
				week: week,
				time: powerTime,
				brand_arr: brandIdArr,
				power_time_json: powerTimeJson
			};
			var actionUrl = "<?=admin_url('brand/save_power_time_batch_v2')?>";
			ajax_post(actionUrl, data, function(res){
				// 隐藏弹窗
				$("#modal-power-time").modal('hide');
				// 开关机时间赋值
				powerTimeJson = res.data;
				// 异步刷新页面
				var className = ".week-" + week + " .bottom";
				$(className).empty();
				powerTime.forEach(function(item, key) {
					// console.log(item);
					var timeStr = item.starttime + " - " + item.endtime;
					var mr = key % 2 == 0 ? "mr10" : "";
					$(className).append('<span class="label label-success ' + mr + '">' + timeStr + '</span>');
				})
				// console.log(powerTime);
			})
		});
		// 重置默认时间
		$("body").on('click', '.reset-power-time', function() {
			var that = $(this);
			layer.confirm('确定重置默认时间？', function(index){
				layer.close(index);
				// 提交数据
				var actionUrl = "<?= admin_url('brand/reset_power_time_v2')?> ";
				var actionData = {
					brand_arr: brandIdArr
				};
				ajax_post(actionUrl, actionData, function(res) {
					if(res.success) window.location.reload();
				});
			});
		});
	
    })
	// 生成定时开关机时间
	function create_power_time_item(starttime, endtime) {
		$("#power-time-div").append('<div class="form-group mg0">\
			<div class="col-sm-1"></div>\
			<div class="alert alert-success col-sm-10">\
				<button type="button" class="close" data-dismiss="alert">\
					<i class="ace-icon fa fa-times"></i>\
				</button>\
				<a href="javascript:;" class="timepicker time-start" data-default-time="'+ starttime +'">'+ starttime +'</a> - <a href="javascript:;" class="timepicker  time-end" data-default-time="'+ endtime +'">'+ endtime +'</a>\
			</div>\
		</div>');

		$('.timepicker').timepicker({
				minuteStep: 1,
				showSeconds: false,
				showMeridian: false,
				disableFocus: true,
				icons: {
					up: 'fa fa-chevron-up',
					down: 'fa fa-chevron-down'
				}
			}).on('changeTime.timepicker', function(e) {
				var target = e.currentTarget;
				$(target).text(e.time.value)
			});
	}
</script>